/**
 * Created by liguangsong on 16/8/12.
 */
import React from 'react'
import '../../css/navigationBar/selectView.css'

var SelectView = React.createClass({
    getInitialState() {
        return {
            lineLeft: '462px',
            lineWidth: '51px'
        }
    },


    render() {
        //console.log(this.state.lineLeft + "   " + this.state.lineWidth);
        return (
            <div className="selectView">
                <ul className="selectBar">
                    <li>
                        <a onMouseMove={this.handleMouse}>首页</a>
                    </li>
                    <li onMouseOut={this.handleOut} style={{width: '90px'}}>
                        <a  onMouseMove={this.handleMouse}>产品</a>
                        <div onMouseMove={this.selectCpMove} onMouseOut={this.selectCpOut} hidden="YES" className="select_cp">
                            <a>病历夹</a>
                            <a>医口袋</a>
                            <a>医学文献</a>
                        </div>
                    </li>
                    <li style={{width: '140px'}}>
                        <a onMouseMove={this.handleMouse}>病历夹网站</a>
                    </li>
                    <li style={{width: '120px'}}>
                        <a onMouseMove={this.handleMouse}>口袋医药</a>
                    </li>
                    <li style={{width: '90px'}}>
                        <a onMouseMove={this.handleMouse}>博客</a>
                    </li>
                    <li style={{width: '120px'}}>
                        <a onMouseMove={this.handleMouse}>关于我们</a>
                    </li>
                </ul>
                <div className="select_line" style={{marginLeft: this.state.lineLeft, width: this.state.lineWidth}}></div>

            </div>
        )
    },

    selectCpOut(event) {
        $(".select_cp").hide();
        $(".select_line").show();
    },

    selectCpMove(event) {
        $(".select_cp").show();
        $(".select_line").hide();
    },

    handleOut(event) {
        $(".select_cp").hide();
        $(".select_line").show();
    },

    handleMouse(event) {
        //console.log(event.target.text);
        switch(event.target.text) {
            case "首页": {
                this.setState({
                    lineLeft: "20px", lineWidth: '53px'
                });
                break;
            }
            case "产品": {
                $(".select_line").hide();
                $(".select_cp").show();
                break;
            }
            case "病历夹网站": {
                this.setState({
                    lineLeft: '203px', lineWidth: '97px'
                });
                break;
            }
            case "口袋医药": {
                this.setState({
                    lineLeft: '343px', lineWidth: '78px'
                });
                break;
            }
            case "博客" : {
                this.setState({
                    lineLeft: '462px', lineWidth: '51px'
                });
                break;
            }
            case "关于我们": {
                this.setState({
                    lineLeft: '553px', lineWidth: '78px'
                });
                break;
            }
        }
    }
});

export default SelectView;